export function getFlowChartOption({ data = [] }) {
  const newData: any = []
  data.forEach((d, index) => {
    const { value, name } = d
    newData.push(
      Object.assign(
        { value, name },
        {
          label: {
            show: (function() {
              if (index === 0) {
                return true
              } else {
                return false
              }
            })(),
            padding: [0, -60],
            lineHeight: 30,
            formatter: '{d|{d}%}\n{b|{b}}',
            rich: {
              b: {
                fontSize: 14,
                color: '#FCFEFF',
                fontFamily: 'PingFang Regular'
              },
              d: {
                fontSize: 18,
                lineHeight: 24,
                fontFamily: 'PingFang Regular',
                fontWeight: 400,
                color: '#ffffff'
              }
            },
            position: 'outside'
          },
          labelLine: {
            length: 16,
            length2: 60,
            show: (function() {
              if (index === 0) {
                return true
              } else {
                return false
              }
            })()
          },
          emphasis: {
            labelLine: {
              show: true
            }
          }
        }
      )
    )
  })
  return {
    tooltip: {
      backgroundColor: 'rgba(255,255,255, 0)',
      borderColor: 'rgba(255,255,255, 0)',
      // show: false
      formatter: (params: any) => {
        let html = ''
        if (params.seriesIndex === 1) {
          /* eslint-disable */
          return (html += `<span 
            style='display:block; width:110px; height:26px; line-height: 23px; background: linear-gradient(to right, #22B3F0 0%,#0D4BC9 100%); color:#fff;fontWeight:500; fontFamily:PingFang Regular; fontSize:16px; border-radius: 13px;padding: 0 9px'>
            ${params.name} : ${params.value}人
            </span>`)
        } else {
          return ''
        }
      }
    },
    graphic: {
      // 图形中间图片
      elements: [
        {
          type: 'image',
          style: {
            image: require('assets/images/flow-icon.png'), // 你的图片地址
            width: 82,
            height: 85
          },
          left: '17%',
          top: 'center'
        }
      ]
    },
    legend: [
      {
        icon: 'circle',
        right: '8%',
        data: data.slice(0, 1),
        top: '60%',
        width: '50%',
        itemGap: 10,
        itemHeight: 10,
        textStyle: {
          color: '#FCFEFF',
          fontSize: 14,
          fontFamily: 'PingFang Regular',
          rich: {
            name: {
              color: 'rgba(255, 255, 255, 0.7)',
              fontSize: 14
            },
            value: {
              color: '#fff',
              fontSize: 20
            }
          }
        },
        formatter: (name: any) => {
          /* eslint-disable */
          if (data.length) {
            const item = data.filter((item: any) => item.name === name)[0]
            return `{name|${name}}    {value| ${item['value']}} `
          }
        }
      },
      {
        icon: 'circle',
        data: data.slice(1, 2),
        right: '8%',
        top: '40%',
        width: '50%',
        itemGap: 10,
        itemHeight: 10,
        textStyle: {
          color: '#FCFEFF',
          fontSize: 14,
          fontFamily: 'PingFang Regular',
          rich: {
            name: {
              color: 'rgba(255, 255, 255, 0.7)',
              fontSize: 14
            },
            value: {
              color: '#fff',
              fontSize: 20
            }
          }
        },
        formatter: (name: any) => {
          if (data.length) {
            const item = data.filter((item: any) => item.name === name)[0]
            return `{name|${name}}    {value| ${item['value']}} `
            // return '{name|' + name + ': }{value|' + item.value + '}'
          }
        }
      }
    ],
    color: ['#FFFF00', '#21BAD6'],
    series: [
      {
        type: 'pie',
        radius: ['50%', '59%'],
        center: ['25%', '50%'],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: false,
              color: 'white'
            }
          }
        },
        label: {
          show: false
        },
        data: [
          {
            value: 50,
            itemStyle: {
              normal: {
                color: ' #22627a',
                opacity: 0.5
              }
            }
          }
        ]
      },
      {
        name: '客流量',
        type: 'pie',
        radius: ['60%', '68%'],
        center: ['25%', '50%'],
        itemStyle: {
          normal: {
            borderColor: 'rgba(23, 27, 31, 0.4)',
            borderWidth: 2
          }
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: newData
      }
    ]
  }
}

export function getRankChartOption() {
  const data = [
    {
      name: '桂林',
      value: 1260
    },
    {
      name: '柳州',
      value: 927
    },
    {
      name: '北海',
      value: 859
    },
    {
      name: '防城巷',
      value: 765
    },
    {
      name: '百色',
      value: 478
    }
  ]
  const getArrByKey = (data: any, k: any) => {
    const key = k || 'value'
    const res: any = []
    if (data) {
      data.forEach(function(t: any) {
        res.push(t[key])
      })
    }
    return res // ["桂林", "柳州", "北海", "防城巷", "百色"]
  }
  const getSymbolData = (data: any) => {
    const arr = []
    for (let i = 0; i < data.length; i++) {
      arr.push({
        value: data[i].value,
        symbolPosition: 'end'
      })
    }
    return arr // [{value:10,symbolPosition:'end'}]
  }
  // console.log(getSymbolData(data));
  return {
    grid: {
      top: '2%',
      bottom: -15,
      right: 24,
      left: -35,
      containLabel: true
    },
    xAxis: {
      show: false
    },
    yAxis: [
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: getArrByKey(data, 'name'),
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },

        axisLabel: {
          show: true,
          interval: 0,
          color: '#fff',
          align: 'left',
          margin: 60,
          formatter: function(value: any) {
            return '{title|' + value + '}'
          },
          rich: {
            title: {
              width: 50,
              align: 'left',
              fontSize: 18,
              fontFamily: 'PingFang Regular'
            }
          }
        }
      },
      {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: getArrByKey(data, 'name'),
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          shadowOffsetX: '-20px',
          color: ['#fff'],
          align: 'left',
          verticalAlign: 'center',
          lineHeight: 40,
          fontSize: 20,
          margin: 25,
          formatter: function(value: any, index: number) {
            return data[index].value
          }
        }
      }
    ],
    series: [
      {
        name: '', // 发光的⭕️
        type: 'pictorialBar',
        symbol:
          // '',
          'image://',
        symbolSize: [40, 40],
        symbolOffset: [20, 0],
        z: 12,
        itemStyle: {
          normal: {
            color: '#fff'
          }
        },
        data: getSymbolData(data)
      },
      {
        name: '条',
        type: 'bar',
        showBackground: true,
        // barBorderRadius: 30,
        yAxisIndex: 0,
        data: data,
        barWidth: 5,
        // align: left,
        itemStyle: {
          normal: {
            // color: 'rgba(41, 162, 245, 1)',
            color: '#0096FF',
            barBorderRadius: 5
          }
        },
        backgroundStyle: {
          color: '#203AA4'
        }
      }
    ]
  }
}
